<template>
  <div id="qrCode"
       class="qrCode">
    <div class="mark"></div>
    <div class="qr-main">
      <i class="close fa fa-times"
         @click="close"></i>
      <div class="qr-title">
        注册二维码
      </div>
      <div class="arCodeImgTwo">
        <div v-show="h5Flag===false">
          <div class="qr-dept">{{orgName}}<span v-if="storeName">&nbsp;- &nbsp;{{storeName}}</span><span v-if="groupName">&nbsp;-&nbsp;{{groupName}}</span></div>
          <img :src="wxImgUrl"
               class="img" />
        </div>
        <div v-show="h5Flag===true">
          <div id="all-qrcode"
               class="allQrcode"
               v-show="isShot">
            <div class="qr-dept"
                 id="qr-dept">{{orgName}}<span v-if="storeName">&nbsp;- &nbsp;{{storeName}}</span><span v-if="groupName">&nbsp;-&nbsp;{{groupName}}</span></div>
            <canvas id="canvas"
                    class="canvasSize"></canvas>
          </div>
          <img :src="h5ImgUrl"
               v-show="!isShot"
               class="arCodeImg" />
        </div>
      </div>
      <div class="qr-info">
        <div class="change"
             v-if="wxImgUrl"
             @click="changeCode">{{changeText}}</div>
        <div>请截图或拍照保存</div>
        <div>注册时，即可自动获取门店信息</div>
      </div>
      <div class="space"></div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode";
import Html2canvas from "html2canvas";
export default {
  props: ["qrcode"],
  data() {
    return {
      codes: "",
      orgName: "",
      storeName: "",
      groupName: "",
      h5ImgUrl: "",
      isShot: true,
      changeText: "切换分销助手码",
      wxImgUrl: "",
      h5Flag: null
    };
  },
  components: {
    QRCode,
    Html2canvas
  },
  watch: {
    h5ImgUrl(v) {
      if (v && v.length < 10) {
        this.toImg();
      } else {
        this.isShot = false;
      }
    }
  },
  methods: {
    // 默认显示小程序码。可以切换分销助手码
    changeCode() {
      this.changeText =
        this.changeText === "切换分销助手码"
          ? "切换小程序码"
          : "切换分销助手码";
      this.h5Flag = !this.h5Flag;
      if (!this.h5ImgUrl) {
        this.useqrcode();
      }
    },
    useqrcode() {
      var _self = this;
      _self.isShot = true;
      let text = "";
      let urlsParams = "qudaowangRegister";
      if (this.orgName) {
        text += this.orgName;
        urlsParams += "|" + this.qrcode.orgId;
      }
      if (this.storeName) {
        text += "&nbsp;-" + this.storeName;
        urlsParams += "|" + this.qrcode.storeId;
      }
      if (this.groupName) {
        text += "&nbsp;-" + this.groupName;
        urlsParams += "|" + this.qrcode.groupId;
      }
      var canvas = document.getElementById("canvas");
      let url = window.location.origin;
      let urls = url.split(".");
      if (urls[1] != "0") {
        urls[1] = "agencych";
        url = urls.join(".");
        url += "/vendor-h5/" + window.location.search;
        url += "#/register";
        url += "/" + urlsParams;
      } else {
        url += "/register/" + urlsParams;
      }
      document.getElementById("qr-dept").innerHTML = text;
      QRCode.toCanvas(canvas, url, function () {
        _self.toImg();
      });
    },
    // 小程序码
    wxqrcode() {
      // console.log(this.qrcode);
      this.orgName = this.qrcode.orgName;
      this.storeName = this.qrcode.storeName;
      this.groupName = this.qrcode.groupName;
      let id = this.qrcode.qrCodeId;
      const url = this.utilHelper.apiUrl + "/api/getDepartmentQrCodeUrl";
      this.$http
        .post(url, { params: { id } })
        .then((res) => {
          if (res.body.result == "1" && res.body.resData) {
            this.wxImgUrl = res.body.resData;
            this.h5Flag = false;
          } else {
            this.wxImgUrl = "";
            this.h5Flag = true;
            this.useqrcode();
          }
          // this.wxImgUrl =
          //   "https://736d-sm-20v9e-1303927130.tcb.qcloud.la/banner.png";
        })
        .catch((err) => {
          this.wxImgUrl = "";
          this.h5Flag = true;
          this.useqrcode();
        });
    },
    close() {
      var code = document.getElementById("qrCode");
      code.style.display = "none";
      this.h5Flag = false;
      this.h5ImgUrl = "";
    },
    toImg() {
      var allQrcode = document.getElementById("all-qrcode");
      Html2canvas(allQrcode).then((canvas) => {
        this.h5ImgUrl = canvas.toDataURL(); //图片地址
      });
    }
  }
};
</script>
<style scoped>
.allQrcode {
  width: 200px;
  height: 200px;
  margin: auto;
}
.arCodeImgTwo {
  margin: auto;
  width: 200px;
  height: 200px;
  text-align: center;
}
.arCodeImgTwo .img {
  width: 164px;
  height: 164px;
}
.arCodeImg {
  margin-left: -16px;
  width: 200px;
  height: 200px;
}
.canvasSize {
  width: 164px !important;
  height: 164px !important;
}
.qrCode {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  outline: 0;
  z-index: 1500;
  display: none;
}
.mark {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  transition: opacity 0.15s linear;
  opacity: 0.5;
  z-index: 1010;
}
.qr-main {
  margin: 150px auto;
  text-align: center;
  z-index: 1040;
  position: relative;
  width: 350px;
  background: #fff;
}
.qr-dept {
  color: #ff6c00;
  margin-bottom: 10px;
}
/* .qr-info {
  margin: 20px 0;
} */
.change {
  font-size: 20px;
  color: rgb(88, 124, 221);
  font-weight: 550;
  padding: 10px;
}
.close {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 20px;
}
.qr-title {
  margin: 0 0 30px 0;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
}
.space {
  height: 20px;
}
</style>